<!--
*- coding = utf-8 -*-
#@Time : 2025-10-31 21:58
#@Author : 管茂良
#@File : index.vue
#@web  : www.php-china.com
#@Software: WebStorm
-->
<template>
    <view class="custom-tabbar" :style="{ backgroundColor: tabBgColor }">
        <view
                class="tab-item"
                :class="{ 'active': currentIndex === index }"
                v-for="(item, index) in tabList"
                :key="index"
                @click="handleTabClick(index)"
        >
            <!-- 图标 -->
            <view class="tab-icon">
                <image
                        :src="currentIndex == index ? item.selectedIconPath : item.iconPath"
                        mode="widthFix"
                        alt="tab图标"
                ></image>
                <view class="tab-badge" v-if="item.badge">{{ item.badge }}</view>
            </view>
            <!-- 文本 -->
            <text class="tab-text" :style="{ color: currentIndex === index ? activeColor : inactiveColor, }">
                {{ item.text }}
            </text>
        </view>
    </view>
</template>

<script setup lang="ts">
    import { ref, onMounted, watch } from 'vue';
    import { useRoute } from 'vue-router';
    import {handleGetPageInfo} from "@/utils/utils";
    import {onHide, onLaunch, onShow} from "@dcloudio/uni-app";

    const props = defineProps({
        // TabBar 背景色
        tabBgColor: {
            type: String,
            default: '#ffffff'
        },
        iconSize:{
            type:String,
            default:'24px'
        }
    });
    const curPageStyleInfo = handleGetPageInfo().getCurrentStyle()
    // 激活颜色
    let activeColor =ref(curPageStyleInfo.tabBarActiveColor || '#007aff')
    // 未激活颜色
    let inactiveColor =ref(curPageStyleInfo.tabBarInactiveColor || '#8e8e93')

    // 监听路由变化，更新当前 Tab
    // onMounted(() => {
    //     // 初始化当前路径
    //     currentPath.value = route.path;
    //     // 监听路由变化
    //     watch(
    //         () => route.path,
    //         (newPath) => {
    //             currentPath.value = newPath;
    //         }
    //     );
    // });
    //底部导航栏配置
    const tabList = [
        {
            text: '首页',
            iconPath:'/static/img/nav/home.png',
            selectedIconPath:'/static/img/nav/homeActive.png',
            icon: 'home',
            pagePath: '/pageHome/index/index'
        },
        {
            text: '笔记',
            iconPath:'/static/img/nav/note.png',
            selectedIconPath:'/static/img/nav/noteActive.png',
            icon: 'category',
            pagePath: '/pageNote/index/index'
        },
        {
            text: '统计',
            iconPath:'/static/img/nav/statistics.png',
            selectedIconPath:'/static/img/nav/statisticsActive.png',
            icon: 'discover',
            pagePath: '/pageStatistics/index/index'
        },
        {
            text: '我的',
            iconPath:'/static/img/nav/user.png',
            selectedIconPath:'/static/img/nav/userActive.png',
            icon: 'profile',
            pagePath: '/pageMe/index/index'
        }
    ];
    let currentIndex = ref(0);
    // 初始化当前选中的导航项
    const updateCurrentTabIndex = () => {
        let curPagePath = handleGetPageInfo().getCurrentPage();
        const index = tabList.findIndex(item => item.pagePath === '/'+curPagePath);
        if (index !== -1) {
            currentIndex.value = index;
        }
    };
    // 监听路由变化，更新当前选中的导航项
    onShow(()=>{
        updateCurrentTabIndex();
        console.log("App Hide");
    })
    onLaunch(() => {
        console.log("App Launch");
    });
    onShow(() => {
        console.log("App Show");
        uni.hideTabBar();
    });
    onHide(() => {
        console.log("App Hide");
    });


    // 处理 Tab 点击
    const handleTabClick = (index: number) => {
        // 如果点击的是当前选中项，不执行操作
        if (index === currentIndex.value) {
            return;
        }

        const item = tabList[index];
        // 如果导航项配置了onClick方法，执行该方法
        // if (item.onClick && typeof item.onClick === 'function') {
        //     item.onClick(index);
        // } else {
        // 导航到指定页面
        // #ifdef MP-WEIXIN || APP-PLUS || H5
        uni.switchTab({
            url: item.pagePath,
            fail:(err)=>{
                console.error('Tab 跳转失败:', err);
            }
        });
        // #endif
    };
</script>

<style lang="less" scoped>
    // 全局变量
    @tab-height: 50px; // TabBar 高度
    @safe-area-padding: 0; // 底部安全区（iOS 适配）

    // 适配 iOS 底部安全区
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
                @safe-area-padding: env(safe-area-inset-bottom);
    }

    .custom-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        padding-bottom: @safe-area-padding;
        box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
        z-index: 998;

        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            cursor: pointer;
            padding: 4px 0;

            .tab-icon {
                position: relative;
                width: v-bind(iconSize);
                height: v-bind(iconSize);
                margin-bottom: 2px;

                image {
                    width: 100%;
                    height: 100%;
                }

                .tab-badge {
                    position: absolute;
                    top: -4px;
                    right: -6px;
                    background-color: #ff4d4f;
                    color: #fff;
                    font-size: 11px;
                    padding: 1px 4px;
                    border-radius: 8px;
                    min-width: 16px;
                    text-align: center;
                }
            }

            .tab-text {
                font-size: 11px;
                font-weight: 500;
            }
        }
        /* 激活状态背景 */
        .tab-item.active {
            background-color: v-bind(activeBackgroundColor);
        }
    }
    // 深色模式适配
    @media (prefers-color-scheme: dark) {
        .custom-tabbar {
            background-color: #2c2c2c !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        .tab-text,
        .tab-icon{
            color: #f5f5f5;
        }
    }
</style>
